<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">我的兑换</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/mine' }" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>

		<div class="no_content" v-if="is_null">
			<icon name="no_content" scale="15"></icon>
		</div>

		<div v-if="is_content">
			<div v-for="(order,i) in goods_order_list" :key="i">
				<v-card class="mx-auto" width="100%" outlined>
					<v-card-actions>
						<div style="color: #747577;width: 100%;"><span>收件人：{{order.address.name}}({{order.address.phone}}) </span>
							<div style="color:#FF5252;">地址：{{order.address.address}}</div>
						</div>
					</v-card-actions>
					<v-divider></v-divider>
					<v-list-item three-line>
						<v-list-item-avatar tile size="100" class="image_border_list"><img :src="order.goods.index_image"
								alt="未加载" />
						</v-list-item-avatar>
						<v-list-item-content>
							<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{order.goods.name}}</span></v-list-item-title>
							<v-list-item-subtitle><span>已兑换:{{order.goods.volume}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>随机发货</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>精品</span></v-list-item-subtitle>
							<div class="overline">花费<span style="color:#FF5252">{{order.total_price}}</span>积分
								<div style="float: right;margin-right:1% ;color:red" v-if="order.order_status=='UNSENT_GOODS'">
									未发货
								</div>
								<div style="float: right;margin-right:1% ;color:#08ACEE" v-else>
									已发货
								</div>
							</div>
						</v-list-item-content>
					</v-list-item>
				</v-card>
				<div style="height: 1.5vh;"></div>
			</div>
		</div>


	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "Exchange",
		data() {
			return {
				goods_order_list: [],
				is_null: false,
				is_content:false
			}
		},
		mounted() {
			let _this = this;
			axios
				.get("/api/v1.0/users/get_my_goods")
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.goods_order_list = response.data.data;
						if (_this.goods_order_list.length == 0) {
							_this.is_null = true;
						} else {
							_this.is_content = true;
						}
						console.log(response.data.data);
					} else if (response.data.errno === '4101') {
						// 未登跳转到登录页面
						setTimeout(function() {
							_this.$router.replace({
								path: "/login"
							});
						}, 1000);
					} else {
						console.log(response.data);
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scoped>

</style>
